<template>
  <div class="filter">
    <el-button type="text" @click="toggleCollapse">
      {{collapse ? collapseOnText : collapseOffText}}
    </el-button>
    <el-collapse-transition>
      <div v-show="collapse" class="filter-pane" :class="{'multi-groups': isMultiGroups}">
        <div class="groups-wrap">
          <div class="groups">
            <div
              v-for="(group, gIndex) in conditions"
              class="group"
              :class="{'multi-conditions': group.items.length > 1}"
              :key="group.key">
              <div class="condition-pane">
                <div class="conditions">
                  <div class="rows">
                    <div
                      class="row"
                      v-for="(condition, cIndex) in group.items"
                      :key="condition.key">
                      <el-select
                        v-model="condition.fieldName"
                        placeholder="请选择"
                        @change="(value) => {parentSelectChange(value, condition)}">
                        <el-option label="分公司" value="subcompanyName"></el-option>
                        <el-option label="分部" value="branchName"></el-option>
                        <el-option label="一级渠道" value="channelLv1Id"></el-option>
                        <el-option label="二级渠道" value="channelLv2Id"></el-option>
                        <el-option label="职工岗位" value="position"></el-option>
                        <el-option label="门店类别" value="shopType"></el-option>
                      </el-select>
                      <el-input
                        v-if="condition.formType === 1"
                        v-model="condition.content"
                        placeholder="请输入群组名称"
                        clearable
                        style="width: 280px;">
                      </el-input>
                      <el-select
                        v-if="condition.formType === 2"
                        v-model="condition.content"
                        filterable
                        placeholder="请选择"
                        style="width: 280px;">
                        <el-option
                          v-for="(value, key) in condition.data"
                          :key="key"
                          :label="value"
                          :value="key">
                        </el-option>
                      </el-select>
                      <el-select
                        v-if="condition.formType === 3"
                        v-model="condition.content"
                        filterable
                        placeholder="请选择"
                        style="width: 280px;">
                        <el-option label="A+" value="A+"></el-option>
                        <el-option label="A" value="A"></el-option>
                        <el-option label="B" value="B"></el-option>
                        <el-option label="C" value="C"></el-option>
                        <el-option label="D1" value="D1"></el-option>
                        <el-option label="D2" value="D2"></el-option>
                        <el-option label="E" value="E"></el-option>
                      </el-select>
                      <i class="el-icon-error" v-if="removeable(gIndex, cIndex)"
                         @click="removeCondition(gIndex, cIndex)"></i>
                    </div>
                  </div>
                  <div class="relation group-relation" v-if="group.items.length > 1">
                    <el-switch
                      class="switch"
                      v-model="group.relationType"
                      active-text="且"
                      active-color="#39c6cd"
                      :active-value="2"
                      inactive-text="或"
                      inactive-color="#ff9c4b"
                      :inactive-value="1">
                    </el-switch>
                  </div>
                </div>
                <el-button
                  class="add-condition-btn"
                  size="mini"
                  icon="el-icon-circle-plus"
                  @click="addCondition(gIndex)">
                  新增一个条件
                </el-button>
              </div>
            </div>
          </div>
          <div class="relation" v-if="isMultiGroups">
            <el-switch
              class="switch"
              v-model="relationType"
              active-text="且"
              active-color="#39c6cd"
              :active-value="2"
              inactive-text="或"
              inactive-color="#ff9c4b"
              :inactive-value="1">
            </el-switch>
          </div>
        </div>
        <div class="add-group" v-if="multiGroups">
          <el-button class="add-group-btn" size="mini" icon="el-icon-circle-plus" @click="addGroup">新增一组条件</el-button>
        </div>
        <div class="emit-btns">
          <el-button plan @click="clear">{{clearBtnText}}</el-button>
          <el-button type="primary" @click="search">{{searchBtnText}}</el-button>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
  import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
  import {getChannelList} from '@/service/getData'
  export default {
    components: {
      ElCollapseTransition: CollapseTransition,
    },
    props: {
      multiGroups: {
        type: Boolean,
        default: true
      },
      collapsable: {
        type: Boolean,
        default: true
      },
      collapseOnText: {
        type: String,
        default: '收起筛选条件'
      },
      collapseOffText: {
        type: String,
        default: '更多筛选条件'
      },
      clearBtnText: {
        type: String,
        default: '清空'
      },
      searchBtnText: {
        type: String,
        default: '搜索'
      }
    },
    data() {
      return {
        relationType: 2,
        conditions: [],
        collapse: true
      }
    },
    computed: {
      isMultiGroups() {
        return this.conditions.length > 1
      },
    },
    created() {
      this.addGroup()
    },
    methods: {
      // 创建不重复的key
      createKey(array = []) {
        const keys = array.map(item => item.key)
        return Math.max.apply(null, keys.length ? keys : [0]) + 1
      },

      // 创建一个条件
      createCondition(conditions) {
        return {
          key: this.createKey(conditions),
          data: {},
          formType: 1,
          fieldName: '',
          content: '',
          operation: ''
        }
      },

      // 创建一个组 A  B C  D1  D2  E
      createGroup(groups = []) {
        return {
          key: this.createKey(groups),
          relationType: 2,
          items: [this.createCondition()]
        }
      },

      // 添加一组条件
      addGroup() {
        const groups = this.conditions
        groups.push(this.createGroup(groups))
      },

      // 添加一个条件
      addCondition(groupIndex) {
        const items = this.conditions[groupIndex].items
        items.push(this.createCondition(items))
      },

      // 删除条件(组)
      removeCondition(groupIndex, conditionIndex) {
        const items = this.conditions[groupIndex].items
        items.splice(conditionIndex, 1)
        if (!items.length) {
          this.conditions.splice(groupIndex, 1)
        }
      },

      // 展开折叠筛选条件
      toggleCollapse() {
        if (this.collapsable) {
          this.collapse = !this.collapse
        }
      },

      // 设置条件的operation(根据fieldName写死的)
      parentSelectChange(value, condition) {
        condition.data = {}
        condition.content = ''
        const items = ['subcompanyName', 'branchName', 'position']
        condition.operation = items.indexOf(value) > -1 ? 'contain' : 'equal'
        if(value === 'channelLv1Id' || value === 'channelLv2Id') {
          condition.formType = 2
          getChannelList(value).then(res => {
            condition.data = res.data.data
          }).catch(() => {

          })
        }else if(value === 'shopType') {
          condition.formType = 3
        }
      },

      // 条件是否可删除
      removeable(groupIndex, conditionIndex) {
        return !(groupIndex === 0 && conditionIndex === 0)
      },


      // 触发点击搜索按钮事件
      search() {
        let groups = this.$_.cloneDeep(this.conditions)
        groups = groups.map(condition => {
          delete condition.key
          condition.items.forEach(item => {
            delete item.key
            delete item.data
            delete item.formType
          })
          return condition
        })
        const conditions = {
          relationType: this.relationType,
          conditions: groups
        }
        this.$emit('search', conditions)
      },

      // 触发点击清除按钮事件
      clear() {
        this.conditions = [this.createGroup()]
        this.relationType = 2
        this.$emit('clear')
      }

    }
  }
</script>

<style lang="scss" scoped>

  .filter {
    $inputHeight: 40px;
    $lineColor: #DCDFE6;
    $top: $inputHeight / 2;
    $height: calc(100% - #{$inputHeight});

    .group{
      &.multi-conditions {
        position: relative;
        .conditions {
          position: relative;
          box-sizing: border-box;
          padding-left: 108px;
          .rows:after {
            content: "";
            position: absolute;
            top: $top;
            left: -64px;
            display: block;
            height: $height;
            width: 1px;
            background-color: $lineColor;
          }
          .row:first-child:after,
          .row:last-child:after {
            content: "";
            position: absolute;
            top: 50%;
            left: -64px;
            display: block;
            width: 64px;
            height: 1px;
            background-color: $lineColor;
          }
        }
        .add-condition-btn {
          margin-left: 108px;
        }
      }
      .rows {
        position: relative;
      }
      .row {
        position: relative;
        margin-bottom: 10px;
        overflow: visible;
        &:last-child {
          margin-bottom: 0;
        }
        .columns {
          display: inline-block;
        }
        .el-icon-error {
          display: inline-block;
          margin-left: 10px;
          color: #999;
          cursor: pointer;
          &:hover {
            color: #ff4545;
          }
        }
      }
      .add-condition-btn {
        margin-top: 20px;
      }
      .condition-pane {
        box-sizing: border-box;
        padding: 30px 10px;
        background-color: #f7f5f5;
      }
    }

    .multi-groups {
      .groups-wrap {
        padding-left: 108px;
        padding-right: 108px;
        &:before {
          content: "";
          position: absolute;
          top: $top;
          left: 44px;
          display: block;
          height: $height;
          width: 1px;
          background-color: $lineColor;
        }
      }
      .groups {
        &:before,
        &:after {
          content: "";
          position: absolute;
          left: -64px;
          display: block;
          height: 1px;
          width: 64px;
          background-color: $lineColor;
        }
        &:before {
          top: 20px;
        }
        &:after {
          bottom: 20px;
        }
      }
      .add-group {
        margin-left: 108px;
      }
    }

    .filter-pane,
    .groups-wrap,
    .groups {
      position: relative;
      box-sizing: border-box;
    }

    .add-group{
      margin-top: 15px;
    }

    .relation {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 1;
      transform: translateY(-50%);
    }

    .emit-btns {
      text-align: center;
      margin-top: 15px;
      padding-bottom: 15px;
    }

  }

</style>
